<template>
    <div class="User">
        <div class="user-register">
            <div class="user-register-one">
                <p><img src="//static.smartisanos.cn/mobilenew/img/head.4b81d150.png" alt=""></p>
                <div class="user-register-one-right" @click="toLogin">
                    <p>{{ username }}</p>
                    <p><img src="../assets/img/PersonalCenterimg/jiantou.png" alt=""></p>
                </div>
            </div>
            <div class="user-register-two">
                <ul>
                    <li>
                        <p><img src="../assets/img/PersonalCenterimg/dingdan.png" alt=""></p>
                        <p>全部订单</p>
                    </li>
                    <li>
                        <p><img src="../assets/img/PersonalCenterimg/zhifu.png" alt=""></p>
                        <p>待付款</p>
                    </li>
                    <li>
                        <p><img src="../assets/img/PersonalCenterimg/peisong.png" alt=""></p>
                        <p>待收货</p>
                    </li>
                    <li>
                        <p><img src="../assets/img/PersonalCenterimg/pingjia.png" alt=""></p>
                        <p>待评价</p>
                    </li>
                    <li>
                        <p><img src="../assets/img/PersonalCenterimg/wode.png" alt=""></p>
                        <p>售后</p>
                    </li>
                </ul>
            </div>
        </div>
        <div class="user-Administration">
            <ul>
                <li>
                    <p>地址管理</p>
                    <p><img src="../assets/img/PersonalCenterimg/jiantou.png" alt=""></p>
                </li>
                <li>
                    <p>我的优惠券</p>
                    <p><img src="../assets/img/PersonalCenterimg/jiantou.png" alt=""></p>
                </li>
                <li>
                    <p>优先购买码</p>
                    <p><img src="../assets/img/PersonalCenterimg/jiantou.png" alt=""></p>
                </li>
            </ul>
        </div>
        <div class="user-service">
            <ul>
                <li>
                    <p>零售门店</p>
                    <p><img src="../assets/img/PersonalCenterimg/jiantou.png" alt=""></p>
                </li>
                <li>
                    <p>以旧换新</p>
                    <p><img src="../assets/img/PersonalCenterimg/jiantou.png" alt=""></p>
                </li>
                <li>
                    <p>常见问题</p>
                    <p><img src="../assets/img/PersonalCenterimg/jiantou.png" alt=""></p>
                </li>
                <li>
                    <p>服务支持</p>
                    <p><img src="../assets/img/PersonalCenterimg/jiantou.png" alt=""></p>
                </li>
            </ul>
        </div>
        <div class="user-guarantee">
            <div class="user-service">
            <ul>
                <li>
                    <p>意外碎屏保修服务</p>
                    <p><img src="../assets/img/PersonalCenterimg/jiantou.png" alt=""></p>
                </li>
                <li>
                    <p>延长保修服务</p>
                    <p><img src="../assets/img/PersonalCenterimg/jiantou.png" alt=""></p>
                </li>
                <li>
                    <p>协议政策</p>
                    <p><img src="../assets/img/PersonalCenterimg/jiantou.png" alt=""></p>
                </li>
                <li>
                    <p>资质证照</p>
                    <p><img src="../assets/img/PersonalCenterimg/jiantou.png" alt=""></p>
                </li>
            </ul>
        </div>
        </div>
    </div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'
const userStore = createNamespacedHelpers('user')
const cartStore = createNamespacedHelpers('cart')
export default {
    name: 'user',
    data () {
        return {
            username: ''
        }
    },
    computed: {
        ...userStore.mapState(['user'])
    },
    created () {
        if (this.user.username && this.user.username !== '游客' && this.user.username !== '') {
            this.username = this.user.username
        } else {
            this.username = '登录/注册'
        }
    },
    methods: {
        ...userStore.mapActions(['logoutAsync']),
        ...userStore.mapMutations(['setUser']),
        ...cartStore.mapMutations(['setCart']),
        toLogin () {
            if (this.username === '登录/注册') {
                this.$router.push('/login')
            } else {
                this.logoutAsync()
                    .then((resp) => {
                        if (resp.code === 200) {
                            this.setUser(resp.data)
                            this.setCart(resp.cartList)
                            this.username = '登录/注册'
                        }
                    })
                // localStorage.removeItem('user')
            }
        }
    }
}
</script>

<style lang="scss">
    .User {
        background: #f5f5f5;
        padding: 15px 11px 1px 11px;
        .user-register-one {
            display: flex;
            border-radius: 12px 12px 0 0;
            background: #fff;
            width: 100%;
            align-items: center;
            padding: 16px 0;
            & p:nth-child(1) {
                width: 52px;
                height: 52px;
                padding-left: 18px;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            & p:nth-child(2) {
                width: 6px;
                height: 10px;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            &-right{
                flex: 1;
                width: 262px;
                height: 52px;
                display: flex;
                justify-content: space-between;
                line-height: 52px;
                color: rgba(0,0,0,.8);
                box-sizing: border-box;
                padding-right: 20px;
                p:nth-child(1) {
                    font-size: 16px;
                    font-weight: 800;
                    width: 85px;
                }
                p:nth-child(2) {
                    font-size: 12px;
                    color: #909090;
                    font-weight: 800;
                }
            }
        }
        .user-register-two {
            width: 100%;
            height: 62px;
            background: #fff;
            border-radius: 0 0 12px 12px;
            margin-bottom: 16px;
            ul {
                display: flex;
                // justify-content: space-between;
                border-top: 1px solid #f5f5f5;
                li {
                    flex: 1;
                    width: 68px;
                    height: 62px;
                    border-right: 1px solid #f5f5f5;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                & p:nth-child(1) {
                    width: 20px;
                    height: 20px;
                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
                & p:nth-child(2) {
                    font-size: 0.5rem;
                    font-weight: 700;
                    color: rgba(0,0,0,.4);
                    margin-top: 7px;
                }
                }
                & li:nth-last-child(1) {
                    border-right: none;
                }
            }
        }
        .user-Administration{
            width: 100%;
            height: 189px;
            background: #fff;
            border-radius: 12px 12px 12px 12px;
            margin-bottom: 15px;
            color:rgba(0,0,0,.8);
            ul {
                width: 100%;
                height: 100%;
                li {
                    width: 100%;
                    height: 60px;
                    border: 1px solid #f5f5f5;
                    padding: 0 16px;
                    display: flex;
                    justify-content: space-between;
                    box-sizing: border-box;
                    align-items: center;
                    & p:nth-child(1){
                        font-size: 16px;
                    }
                    & p:nth-child(2) {
                        width: 6px;
                        height: 10px;
                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
                & li:nth-last-child(1) {
                    border: none;
                }
            }
        }
        .user-service{
            width: 100%;
            height: 246px;
            background: #fff;
            border-radius: 12px 12px 12px 12px;
            margin-bottom: 15px;
            ul {
                width: 100%;
                height: 100%;
                li {
                    width: 100%;
                    height: 60px;
                    border: 1px solid #f5f5f5;
                    padding: 0 16px;
                    display: flex;
                    justify-content: space-between;
                    box-sizing: border-box;
                    align-items: center;
                    & p:nth-child(1){
                        font-size: 16px;
                        color:rgba(0,0,0,.8);
                    }
                    & p:nth-child(2) {
                        width: 6px;
                        height: 10px;
                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
                & li:nth-last-child(1) {
                    border: none;
                }
            }
        }
        .user-service {
            margin-bottom: 16px;
        }
    }
</style>
